<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
// Import needed types
import {Config, PixelStreaming} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import {
  Application,
  UIElementCreationMode,
  PixelStreamingApplicationStyle
} from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2'

const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle()
PixelStreamingApplicationStyles.applyStyleSheet()

// Create a stream and UI
// const stream = new PixelStreaming(new Config({
//   useUrlParams: true,
//   initialSettings: {
//     ss: 'ws://192.168.45.26:8888', // 像素流的 WS 地址，默认端口是8080
//     AutoConnect: true,
//     AutoPlayVideo: true,
//     MinQP: 30,
//     XRControllerInput: false,
//     GamepadInput: false,
//     TouchInput: false,
//     HoveringMouse: true,
//   }
// }));
// const application = new Application({
//   stream: stream,
//   onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode),
//   settingsPanelConfig: {
//     isEnabled: false,
//     visibilityButtonConfig: {creationMode: UIElementCreationMode.Disable}
//   },
//   fullScreenControlsConfig: {
//     creationMode: UIElementCreationMode.UseCustomElement,
//     customElement: document.getElementById('myCustomFullscreenButton')
//   }
// });
// stream.addEventListener('videoEncoderAvgQP', (qp) => {
//   /* Code to change any visuals needed based on the QP parameter */
//   console.log("videoEncoderAvgQP", qp);
// })
// const descriptor = {
//   LoadLevel: "/Game/Maps/Level_2",
//   PlayerCharacter: {
//     Name: "Shinobi",
//     Skin: "Dynasty",
//   },
// };
// stream.emitUIInteraction(descriptor);
// document.getElementById('app').appendChild(application.rootElement);
</script>

<style>
body {
  width: 100vw;
  height: 100vh;
  min-height: -webkit-fill-available;
  font-family: 'Montserrat';
  margin: 0;
}
</style>

